<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name=viewport
    content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
  <meta name="referrer" content="no-referrer">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>Test</title>
</head>

<body>
  <article id="app"></article>

  <a class="api a">a.html</a>
  <a class="api b">b.html</a>
  <script>
    //注册路由 原理
    document.querySelectorAll('.api').forEach(item => {
      item.addEventListener('click', (e) => {
        e.preventDefault();
        let link = item.textContent;
        window.history.pushState({ name: 'api' }, link, link)
      }, false)
    });

    //监听路由
    window.addEventListener('popstate', (e) => {
      console.log({
        location: location.href,
        state: e.state
      })
    }, false)
  </script>

  <h3>hash</h3>
  <a class="hash a">#a.html</a>
  <a class="hash b">#b.html</a>

  <script>
    //注册路由 原理
    document.querySelectorAll('.hash').forEach(item => {
      item.addEventListener('click', (e) => {
        e.preventDefault();
        let link = item.textContent;
        location.hash = link;
      }, false)
    });

    //监听路由
    window.addEventListener('hashChange', (e) => {
      console.log({
        location: location.href,
        hash: location.hash
      })
    }, false)
  </script>
</body>

</html>